<template>
  <div id="box">
    <div
      id="con1"
      ref="con1"
      :class="{anim:animate==true}"
      @mouseenter="mEnter"
      @mouseleave="mLeave"
    >

      <div v-for="(item, index) in items"
           :key="index" class="notice-item">
        <div
          style="max-width: calc(100vw - 300px) !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis">
          <span>车辆{{ item.carNo }}绑定的设备{{ item.imei }}触发</span>
          <span class="notice-item-text" @click="warnInfo(item)">{{ item.alarmName }}</span>
          <span>，定位地点为：{{ item.address }}。</span>
          <span v-if="item.orderNo">关联用车中</span>
          <span v-if="item.orderNo" class="notice-item-text" @click="goOrder(item)">订单{{ item.orderNo }}</span>
          <span v-if="item.customerInfo"> ，客户为{{ item.customerInfo }}</span>
        </div>
        <div style="min-width: 260px">
          <span style="margin-right: 20px;color:#999">{{ item.alarmTime }}</span>
          <span style="margin-right: 20px;cursor: pointer" @click="handle(item)">处理</span>
          <span style="cursor: pointer" v-if="2==item.readStatus" @click="read(item)">标记已读</span>
        </div>
      </div>


    </div>

    <el-dialog title="设置标签" width="500px" append-to-body destroy-on-close :visible.sync="showHandleWarn">
      <HandleWarnDialog v-if="showHandleWarn"
                        @success="commit"
                        @cancel="showHandleWarn = false"></HandleWarnDialog>
    </el-dialog>

    <el-dialog title="告警预览" width="800px" append-to-body destroy-on-close :visible.sync="showWarnInfo">
      <WarnDialog :map-data="selItem" v-if="showWarnInfo" @cancel="showWarnInfo = false"></WarnDialog>
    </el-dialog>

  </div>
</template>

<script>
import WarnDialog from '@/components/ScrollNotice/WarnDialog'
import HandleWarnDialog from "@/components/ScrollNotice/HandleWarnDialog";
import {alarmhandle, alertToDo, markAsRead} from "@/api";


export default {
  components: {
    WarnDialog,
    HandleWarnDialog
  },
  data() {
    return {
      animate: false,
      showWarnInfo: false,
      showHandleWarn: false,
      items: [],
      selId: '',
      selItem:{}

    }
  },

  mounted() {
    this.timer1 = setInterval(this.scroll, 3000)

    this.refreshData()
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 方法集合
  methods: {
    refreshData() {
      alertToDo().then(result => {
        this.items = result.data.carAlarmData
      })
    },

    handle(item) {
      this.selId = item.id
      this.showHandleWarn = true
    },

    scroll() {
      const con1 = this.$refs.con1
      if (con1 && con1.style) {
        con1.style.marginTop = '-30px'
      }
      this.animate = !this.animate
      //   在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(() => {
        this.items.push(this.items[0])
        this.items.shift()
        if (con1 && con1.style) {
          con1.style.marginTop = '0px'
        }
        this.animate = !this.animate
        //   这个地方如果不把animate取反会出现消息回滚的现象，此时把ul元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500)
    },
    mEnter() {
      clearInterval(this.timer1)
    },
    mLeave() {
      this.timer1 = setInterval(this.scroll, 3000)
    },
    warnInfo(item) {
      this.selItem = item
      this.showWarnInfo = true
    },
    goOrder(item) {
      this.$router.push({
        path: '/orderBasic/detail',
        query: {orderNo: item.orderNo}
      })
    },

    commit(params) {
      alarmhandle({
        ids: this.selId,
        ...params
      }).then(res => {
        this.showHandleWarn = false
        this.$message.success('处理成功')
        this.$IVue.$emit('refreshRing')
        this.refreshData()
      }).catch(e => {
        this.showHandleWarn = false
      })
    },

    read(item) {

      const _this = this

      this.$confirm('确定标记为已读？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          markAsRead({
            ids:item.id
          }).then(res => {
            _this.$message.success("处理成功")
            _this.$IVue.$emit('refreshRing')
            _this.refreshData()
          })

        })
        .catch(() => {
        })
    }
  },
}
</script>

<style scoped>
/* // 去掉滚动条的默认样式 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#box {
  /*width: 60%;*/
  height: 55px;
  line-height: 20px;
  overflow: hidden;
  /*border: 1px solid red;*/
  transition: all 0.5s;
}

.anim {
  transition: all 0.5s;
}

#con1 li {
  list-style: none;
  height: 20px;
  line-height: 20px;
}

.notice-item {
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  justify-content: space-between;
}

.notice-item-text {
  color: #0d65eb;
  cursor: pointer;
}


</style>
